<template>
<!--  竞赛奖励部分-->
  <div>
    <div class="container">
      <!--    卡片数据-->
      <div v-for="(competitionPrize, index) in competitionPrizes" :key="index">
        <el-card class="box-card" shadow="always">
          <div class="text item">
            <div>
              <span>竞赛名:</span>
              <span class="content">
              <el-tag size="small">{{competitionPrize.name}}</el-tag>
            </span>
            </div>
            <div>
              <span>级别:</span>
              <span class="content">
              <el-tag type="success" size="small">{{competitionPrize.level}}</el-tag>
            </span>
            </div>
            <div>
              <span>奖项:</span>
              <span class="content">
              <el-tag size="small" type="danger">{{competitionPrize.prize}}</el-tag>
            </span>
            </div>
            <div>
              <span>成员:</span>
              <span class="content">
              <el-tag type="success" size="small">{{competitionPrize.members}}</el-tag>
            </span>
            </div>
            <div>
              <span>指导老师:</span>
              <span class="content">
              <el-tag type="success" size="small">{{competitionPrize.teacher}}</el-tag>
            </span>
            </div>
            <div>
              <span>时间:</span>
              <span class="content">
              <el-tag type="success" size="small">{{competitionPrize.time}}</el-tag>
            </span>
            </div>
            <div v-if="competitionPrize.url != null && competitionPrize.url != ''">
              <span>奖状:</span>
              <div v-for="(url,index2) in competitionPrize.url.split(';')" :key="index2">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="url"
                    :preview-src-list="competitionPrize.url.split(';')">
                </el-image>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div v-if="competitionPrizes.length === 0">
        <el-card class="box-card" shadow="always" style="display:flex;justify-content: center">
          <span style="font-size:32px;font-weight:900">暂无您的数据哦~</span>
        </el-card>
      </div>
    </div>
    <!--    分页-->
    <div style="float:right;margin-top: 10px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[2,4]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    userName: ''
  },
  name: "CompetitionPrizeExp",
  data() {
    return {
      // 数据
      competitionPrizes: [],
      // 数据总条数
      total: 0,
      size: 2,
      page: 1,
    }
  },
  methods: {
    /**
     * 数据初始化
     **/
    initData() {
      const url = '/studentInfo/competitionPrizeEmp?page='+this.page+'&size='+this.size+'&name='+this.userName;
      this.getRequest(url).then(resp => {
        this.competitionPrizes = resp.data;
        this.total = resp.total;
      })
    },
    /**
     * 一页显示数据量变化触发事件
     */
    handleSizeChange(val) {
      this.size = val;
      this.initData();
    },
    /**
     * 页码发生变化
     */
    handleCurrentChange(val) {
      this.page = val;
      this.initData();
    }
  },
  mounted() {
    this.initData();
  }
}
</script>

<style scoped>
.item {
  padding: 18px 0;
}

.box-card {
  width: 420px;
  border-radius: 15px;
}

.item >div {
  display: flex;
  justify-content: left;
  margin: 12px;
}
.item >span {
  margin-left: 10px;
}
.container {
  margin: 10px;
  font-family: 宋体;
  display: flex;
  justify-content: space-between;
}
.content {
  margin-left: 12px;
}
</style>